<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      v-model="visibleDialog"
      :title="props.title"
      width="1080px"
      draggable
      :align-center="true"
      @close="closeDialog"
      destroy-on-close
      style="min-width: 1100px"
      class="maxhDialog"
    >
      <el-descriptions title="" :column="3" size="default" border>
        <el-descriptions-item label="设备编号">{{
          data?.equipCode || ""
        }}</el-descriptions-item>
        <el-descriptions-item label="设备名称">{{
          data?.equipName || ""
        }}</el-descriptions-item>
        <el-descriptions-item label="生产设备">{{
          data?.processEquipCode || ""
        }}</el-descriptions-item>
        <el-descriptions-item label="位置" v-if="data?.locationName">{{
          data?.locationName || ""
        }}</el-descriptions-item>
        <el-descriptions-item label="最后采集时间">{{
          data?.lastCollectTime || ""
        }}</el-descriptions-item>
        <el-descriptions-item label="设备状态">
          <el-tag
            v-if="data?.equipMonitorStatusName"
            :type="
              data?.equipMonitorStatusName === '离线'
                ? 'info'
                : data?.equipMonitorStatusName === '在线'
                ? ''
                : data?.equipMonitorStatusName === '故障'
                ? 'danger'
                : 'warning'
            "
            >{{ data?.equipMonitorStatusName || "" }}</el-tag
          >
        </el-descriptions-item>
      </el-descriptions>

      <div>
        <p class="mt-[20px] mb-[10px] text-[15px] fw-600">
          详细信息<span class="text-[12px] fw-400"
            >（最新运行参数结果展示）</span
          >
        </p>
        <div
          v-if="paramsList.length === 0 && !paramsLoading"
          class="h-[360px] noData"
        >
          <img src="@/assets/images/noData2.png" width="150" alt="暂无数据" />
          <div>暂无数据</div>
        </div>
        <div
          v-if="paramsList.length !== 0"
          class="hasData"
          v-loading="paramsLoading"
        >
          <div
            v-for="(item, index) in paramsList"
            :key="index"
            class="box"
            @click="openDialogdetail(item)"
          >
            <div style="word-break: break-all">{{ item.parameterDesc }}</div>
            <div class="value">
              {{ item.value ?? " " }}
              <span
                v-if="
                  item.value !== '' &&
                  item.value !== null &&
                  item.value !== undefined
                "
              >
                <i-ep-dataAnalysis
                  v-if="item.value === true || item.value === false"
                  style="font-size: 14px"
                />
                <i-ep-chatLineSquare v-else style="font-size: 14px" />
              </span>
            </div>
          </div>
        </div>
      </div>
      <equOperatingParameters-detail
        :visible="addDialog.visible"
        :title="addDialog.title"
        :data="addDialog.data"
        :is-readonly="addDialog.readvisible"
        @change-visible="changeVisible"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import request from "@/utils/request";

defineOptions({
  name: "EQUOPERATINGPARAMETERSDETAIL",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  assetType: {
    type: Number,
    default: 1,
  },
});

const visibleDialog = ref(false);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
  }
);

const paramsLoading = ref<any>(false);
const paramsList = ref<any>([]);

watch(
  () => props.data,
  (newVal: any) => {
    if (newVal.equipId) {
      handleParamList();
    }
  }
);

// 处理参数列表数据
function handleParamList() {
  paramsList.value = props.data?.collectionParamList || [];
  if (paramsList.value.length) {
    paramsLoading.value = true;
    getTableList();
  }
}

// 获取运行参数值
async function getTableList() {
  request({
    url: `/iotadmin/deviceData/queryRealTime/${props.data?.equipCode}?parameterType=${props.data?.paramType}`,
    method: "get",
  })
    .then((data) => {
      paramsList.value.forEach((item: any) => {
        item["value"] = data.data?.data[item.parameterName] ?? "";
      });
    })
    .catch((res) => {
      console.log(res);
    })
    .finally(() => {
      paramsLoading.value = false;
    });
}

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
}

// 组件销毁时调用
onBeforeUnmount(() => {
  visibleDialog.value = false;
  emit("change-visible", false);
});

const addDialog = reactive<DialogOption>({
  visible: false,
  readvisible: false,
  title: "",
  data: {},
});

/** 打开设备采集数据表单弹窗 详情 */
function openDialogdetail(roleObj?: any) {
  addDialog.title = `参数【${roleObj.parameterDesc}】运行详情`;
  addDialog.data = {
    ...props.data,
    ...roleObj,
    parameterType: props.data.paramType,
  };
  addDialog.readvisible = true;
  addDialog.visible = true;
}

function changeVisible(value: boolean) {
  addDialog.visible = value;
  if (!value) {
    addDialog.data = {};
  }
}
</script>
<style lang="scss" scoped>
:deep(.maxhDialog .el-dialog__body) {
  max-height: 70vh;
  overflow-y: auto;
  padding: 20px;
  // .el-scrollbar {
  //   max-height: calc(70vh - 265px);
  //   overflow-y: auto;
  // }
}
:deep(.el-descriptions__label.el-descriptions__cell.is-bordered-label) {
  width: 120px;
}
:deep(.el-descriptions__content.el-descriptions__cell.is-bordered-content) {
  min-width: 180px;
}
.noData {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #ebeef5;
}
.hasData {
  flex-wrap: wrap;
  max-height: 360px;
  min-height: 200px;
  overflow-y: scroll;
  .box {
    float: left;
    padding: 20px 10px;
    width: 194px;
    margin-right: 20px;
    margin-bottom: 20px;
    border: 1px solid #ebeef5;
    height: 100px;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    background-color: rgb(245, 246, 251, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .value {
      color: #4f4f4f;
      font-size: 22px;
      margin-top: 5px;
      font-family: DINAlt;
    }
  }
  .box:nth-child(5n) {
    margin-right: 0px;
  }
}
</style>
